<template>
	<view class="content">
		<view class="studyPhase-v">
			<view class="title">
				学车阶段
			</view>
			<view class="phaseList">
				<text @click="selectPhase(1)" :class="phaseIsAction == 1?'phaseIsAction':'item'">科目一</text>
				<!-- <text @click="selectPhase(2)" :class="phaseIsAction == 2?'phaseIsAction':'item'">科目二</text>
				<text @click="selectPhase(3)" :class="phaseIsAction == 3?'phaseIsAction':'item'">科目三</text> -->
				<text @click="selectPhase(4)" :class="phaseIsAction == 4?'phaseIsAction':'item'">科目四</text>
			</view>
		</view>
		
		<view class="book-v">
			<view class="title">
				驾驶证
			</view>
			<view class="bookList">
				<text class="bookIsAction">小车(C1/C2/C3)</text>
			</view>
		</view>
		<view class="btnOk" @click="toAnswer">
			确定
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				phaseIsAction:1,
				subType:1,//科目类型
				drivingType:1//驾驶证类型
			}
		},
		methods:{
			selectPhase(val){
				this.phaseIsAction = val;
				uni.setStorageSync('drivingType', this.drivingType);
				uni.setStorageSync('subType', val);
			},
			toAnswer(){
				uni.navigateTo({
					url:'baseAnswer'
				})
			}
		},onLoad() {
			uni.setStorageSync('drivingType', this.drivingType);
			uni.setStorageSync('subType', this.subType);
		}
		
	}
</script>

<style>
	.content{
		padding: 30rpx;
	}
	.phaseList{
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.bookList{
		font-size: 30rpx;
		margin-top: 20rpx;
	}
	.title{
		font-weight: 800;
	}
	.phaseList .item{
		width: 115rpx;
		height: 40rpx;
		display: inline-block;
		border: 1rpx solid #3F536E;
		text-align: center;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
	}
	.phaseIsAction{
		width: 115rpx;
		height: 40rpx;
		display: inline-block;
		border: 1rpx solid #e98f36;
		text-align: center;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
		color: #fff;
		background-color: #e98f36;
	}
	.book-v{
		margin-top: 30rpx;
	}
	
	.bookIsAction{
		width: 160rpx;
		height: 80rpx;
		display: inline-block;
		border: 1rpx solid #e98f36;
		text-align: center;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
		color: #fff;
		background-color: #e98f36;
	}
	.btnOk{
		background: linear-gradient(to right, #efad6d, #e98f36);
		text-align: center;
		color: #fff;
		position: fixed;
		bottom: 20rpx;
		width: calc( 100% - 60rpx);
		padding: 15rpx 0;
		border-radius: 20rpx;
	}
</style>
